<template>
  <div class="calendarBox">
    <p>日历表</p>
    <!-- 下拉框 - 暂定使用原生 -->
    <div class="selectbox">
      <select name="year" id="year" v-model="year" @change="yearChangFun">
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
        <option value="2026">2026</option>
      </select>
      <label for="year"></label>
      <select name="month" id="month" v-model="month" @change="monthChangFun">
        <option value="1">一月</option>
        <option value="2">二月</option>
        <option value="3">三月</option>
        <option value="5">四月</option>
        <option value="6">五月</option>
        <option value="6">六月</option>
        <option value="7">七月</option>
        <option value="8">八月</option>
        <option value="9">九月</option>
        <option value="10">十月</option>
        <option value="11">十一月</option>
        <option value="12">十二月</option>
      </select>
    </div>
    <!-- 日历 -->
    <el-calendar v-model="dateValue"> </el-calendar>
  </div>
</template>

<script>
export default {
  watch: {
    // 监听dateValue - 实现选择日期执行函数
    dateValue: {
      handler: "dateChange",
      immediate: true, // 首次刷新执行一次
    },
  },
  data() {
    return {
      dateValue: new Date(),
      year: 2020,
      month: 1,
    };
  },
  methods: {
    // 选择年change事件
    yearChangFun() {
      this.dateValue = new Date(
        this.year,
        this.month - 1,
        this.dateValue.getDate()
      );
      document.getElementById("month").focus();
      console.dir(document.getElementById("month"));
    },
    // 选择月change事件
    monthChangFun() {
      this.dateValue = new Date(
        this.year,
        this.month - 1,
        this.dateValue.getDate()
      );
    },
    // 监听dateValue的函数
    dateChange(newVal, oldVal) {
      console.log("oldVal: ", oldVal);
      console.log("newVal: ", newVal);
      // 日期与选择框数据同步 - 选择日期超过当月日期时，通过双向绑定改变下拉框的数据
      this.year = newVal.getFullYear();
      this.month = +newVal.getMonth() + 1;
    },
  },
};
</script>
  
<style lang='less'>
.calendarBox {
  > p {
    background: url("../../../assets/images/icon_rili.png") no-repeat 20px
      center;
    padding: 20px 59px;
    font-size: 18px;
    font-weight: 900;
  }
  .selectbox {
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
    select {
      width: 76px;
      height: 20px;
      border: 1px solid #679af5;
      padding: 0 10px;
      &#year {
        border-radius: 4px 0 0 4px;
      }
    }
  }

  .el-calendar__header {
    display: none;
  }
  .el-calendar__body {
    padding: 10px 0;
    table {
      border-spacing: 29px 1px;
      border-collapse: separate;
      table-layout: auto;
      thead {
        th {
          width: 30px;
          text-align: center;
        }
      }
      tr {
        td {
          width: 30px;
          height: 26px;
          border: none;
          &.is-selected {
            background-color: #7ba6f4;
          }
          &.is-today {
            color: #2c3e50;
          }
          .el-calendar-day {
            padding: 0;
            line-height: 26px;
            height: 26px;
            text-align: center;
            &:hover {
              background-color: #7ba6f4;
            }
          }
        }
      }
    }
  }
}
</style>